<template>
  <div class="base-withdraw">
    <van-empty v-if="isBuilding !== 0" description="当前无住房" />
    <div
      v-else
      style="height: 100%;"
    >
      <van-cell is-link @click="showPopup">{{ type }}</van-cell>
      <van-popup
        v-model="showPicker"
        position="bottom" 
        get-container="#app"
      >
        <van-picker
          title="选择维修类型"
          show-toolbar
          :columns="columns"
          @confirm="onConfirmPicker"
        />
      </van-popup>
      <van-field
        type="textarea"
        v-model="instruction"
        placeholder="其他说明"
        style="margin-top: 20px;"
      />
      上传图片
      <van-uploader v-model="fileList" multiple/>
      <van-button
        round block type="info"
        style="margin-top: 20px;"
        @click="onSubmit"
      >{{ buttonMsg }}</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Repair',
  data() {
    return {
      isBuilding: 0,
      showPicker: false,
      type:'选择维修类型',
      columns: ['停电', '停水', '网络故障', '设备损坏', '漏水'],
      instruction:'',
      fileList: [],
      buttonMsg:"提交",
    };
  },
  mounted() {
    this.HttpManager.getBuilddingByUid(sessionStorage.getItem("userid")).then(res => {
      this.$toast.clear(true);
      if (res.code === 12006) {
        this.isBuilding = 1;
      } else if (res.code === 21009) {
        this.$notify({type: "danger", message: res.msg});
        this.isBuilding = 1;
      } else if (res.code === 21010) {
        this.$notify({type: "warning", message: res.msg});
        this.isBuilding = 1;
      }
    });
    this.HttpManager.getRepairByUid(sessionStorage.getItem("userid")).then(res => {
      console.log(res);
      if(res.code === 0){
        this.$notify({type: "success", message: "上次报修已成功解决"});
      }
      else if(res.code === 62008){
        this.$notify({type: "warning", message: res.msg});
        this.type = res.data.type;
        this.instruction = res.data.instruction;
        let _fileList = this.fileList;
        res.data.pic.split("|").forEach(function (item){
          _fileList.push({"url":item,"deletable":false});
        })
        this.buttonMsg = "修改"
      }
      else if(res.code === 62009){
        this.$notify({type: "success", message: `${res.msg}\n姓名:${res.data.mname}\n电话:${res.data.mtel}`});
      }
    });
  },
  methods: {
    showPopup() {
      this.showPicker = true;
    },
    onConfirmPicker(value, index) {
      this.type = value;
      this.showPicker = false;
    },
    onSubmit () {
      if(this.buttonMsg === "提交"){
        let formData = new FormData();
        formData.append("uid",sessionStorage.getItem("userid"));
        formData.append("type",this.type);
        formData.append("instruction",this.instruction);
        for(let i = 0; i < this.fileList.length; i ++)
          formData.append("file",this.fileList[i].file);
        this.HttpManager.repair_insert(formData).then(res =>{
          if(res.code === 0)
            this.$notify({ type: "success", message: "申请成功"});
          else
            this.$notify({ type: "danger", message: "申请失败"});
        })
      }
      else if(this.buttonMsg === "修改"){
        let formData = new FormData();
        formData.append("uid",sessionStorage.getItem("userid"));
        formData.append("type",this.type);
        formData.append("instruction",this.instruction);
        for(let i = 0; i < this.fileList.length; i ++){
          formData.append("file",this.fileList[i].file);
        }
        this.HttpManager.repair_update(formData).then(res =>{
          if(res.code === 0)
            this.$notify({ type: "success", message: "修改成功"});
          else
            this.$notify({ type: "danger", message: "修改失败"});
        })
      }
    },
  },
}
</script>

<style lang="less" scoped>
  .base-withdraw {
    height: 100%;
    overflow: auto;
    padding: 20px;

    /deep/.van-cell {
      padding: 0;
    }
  }
</style>
